<template>
  <div>
    <el-form-item label="证件类型" :prop="`uboInfoList.${index}.uboIdDocType`" verify>
      <KiSelect
        v-model="form.uboIdDocType"
        :options="DICT.cardTypes"
        @change="cardTypeChange"
        :props="{
          value: 'value',
          label: 'label'
        }"
      />
    </el-form-item>
    <el-form-item label="证件正面照片" :prop="`uboInfoList.${index}.uboIdDocCopyDto`" verify>
      <Imgpond v-bind="imgpondConfig" v-model="form.uboIdDocCopyDto" :count="1" />
    </el-form-item>
    <el-form-item
      label="证件反面照片"
      :prop="`uboInfoList.${index}.uboIdDocCopyBackDto`"
      verify
      v-if="form.uboIdDocType != 'IDENTIFICATION_TYPE_OVERSEA_PASSPORT'"
    >
      <Imgpond
        v-bind="imgpondConfig"
        v-model="form.uboIdDocCopyBackDto"
        :count="1"
      />
    </el-form-item>
    <el-form-item label="证件姓名" :prop="`uboInfoList.${index}.uboIdDocName`" verify>
      <el-input
        v-model="form.uboIdDocName"
        maxlength="256"
        show-word-limit
        clearable
        placeholder="请填写证件姓名"
      />
    </el-form-item>
    <el-form-item
      label="证件号码"
      :prop="`uboInfoList.${index}.uboIdDocNumber`"
      verify
    >
      <el-input
        v-model="form.uboIdDocNumber"
        clearable
        placeholder="请填写证件号码"
      />
    </el-form-item>
    <el-form-item label="证件居住地址" :prop="`uboInfoList.${index}.uboIdDocAddress`" verify>
      <el-input
        v-model="form.uboIdDocAddress"
        maxlength="512"
        show-word-limit
        clearable
        placeholder="请填写证件居住地址"
      />
    </el-form-item>
    <el-form-item label="证件有效期类型" :prop="`uboInfoList.${index}.__docPeriodEndType`" verify>
      <el-radio-group
        v-model="form.__docPeriodEndType"
        @change="onDocPeriodEndTypeChange"
      >
        <el-radio
          :key="i"
          :label="v.value"
          v-for="(v, i) of [
            { value: 1, label: '定期' },
            { value: 2, label: '长期' }
          ]"
        >
          {{ v.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="证件开始日期"
      :prop="`uboInfoList.${index}.uboIdDocPeriodBegin`"
      verify
    >
      <el-date-picker
        v-model="form.uboIdDocPeriodBegin"
        type="date"
        value-format="yyyy-MM-dd"
      />
      <form-item-tip>请填写身份证有效期的开始日期。</form-item-tip>
    </el-form-item>
    <el-form-item
      v-if="form.__docPeriodEndType === 1"
      label="证件失效日期"
      :prop="`uboInfoList.${index}.uboIdDocPeriodEnd`"
      verify
    >
      <el-date-picker
        v-model="form.uboIdDocPeriodEnd"
        type="date"
        value-format="yyyy-MM-dd"
      />
      <form-item-tip>请填写证件有效期的结束日期。</form-item-tip>
    </el-form-item>
  </div>
</template>
<script>
import 'imgpond/dist/style.css'
import Imgpond from 'imgpond'
import DICT from '../dict'
import { jsonToFormData } from '@/utils'

export default {
  name: 'UboInfo',
  props: {
    index: {
      type: Number,
      default: 0
    },
    form: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: { Imgpond },
  data() {
    return {
      DICT,
      imgpondConfig: {
        upload: (file, context) =>
          new Promise((resolve, reject) => {
            // this.$POST(import.meta.env.VUE_APP_BASE_API + '/merchant/applyment/uploadImg', jsonToFormData({
            this.$POST(
              '/sot-admin-api/merchant/applyment/uploadImg',
              jsonToFormData({
                file,
                domainId: import.meta.env.VITE_APP_domainId,
                dir: 'img/wechat',
                ...context.$attrs.requestParam
              }),
              {
                // baseURL: '', // 针对prod环境中baseAPI为相对路径的情况
                timeout: 20000
              }
            )
              .then(({ data }) => {
                resolve(data)
              })
              .catch((e) => {
                reject(e)
              })
          }),
        srcAt: 'url',
        size: 2
      }
    }
  },
  watch: {
    'form.uboIdDocPeriodEnd': {
      handler(n) {
        if (n) {
          this.$set(
            this.form,
            '__docPeriodEndType',
            n === '长期' ? 2 : 1
          )
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    cardTypeChange(e) {
      this.$set(this, 'form', {
        uboIdDocType: e
      })
    },
    onDocPeriodEndTypeChange() {
      this.$set(
        this.form,
        'uboIdDocPeriodEnd',
        this.form.__docPeriodEndType === 1
          ? undefined
          : '长期'
      )
    },
  }
}
</script>
